<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    let router = useRouter();
    const center = reactive({
      hostshare: 0,
      nownum: 0, //余额
      bean: 0, //余额
      say: 0,
      // exceptional:false,
      daily:false,
      share:false,
      watch:0,
    });
    onMounted(() => {
      center.hostshare = Number(window.localStorage.getItem("hostshare"));
      center.say = Number(window.localStorage.getItem("say"));
      center.nownum = Number(window.localStorage.getItem("money"));
      center.bean = Number(window.localStorage.getItem("bean"));
      center.watch = Number(window.localStorage.getItem("watch"));
      center.daily = window.localStorage.getItem("daily");
      center.share = window.localStorage.getItem("share");
    });
    const go = () => {
      router.push({ path: "/" });
    };
    const goinvite = () => {
      router.push({
        path: "/mybag",
        query: {
          id: 504,
        },
      });
    };
    return {
      ...toRefs(center),
      go,
      goinvite,
    };
  },
};
</script>

<template>
  <div class="container missioncenter">
    <div class="top">
      <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
      <div class="info">
        <div class="img">
          <img src="../assets/img/user.jpg" alt="" />
        </div>
        <p>Mercurio</p>
        <p>鲨豆：{{ bean }}</p>
      </div>
    </div>
    <div class="content">
      <div class="move">
        <div class="new">
          <div class="title">新手奖励</div>
          <div class="item">
            <i class="iconfont icon-dashangcishu"></i>
            <div class="operation">
              <span class="txt">打赏主播</span><span class="num">({{ watch }}/1)</span>
              <p>首次打赏主播，奖励100鲨豆</p>
            </div>
            <span v-show="watch == 0" class="go" @click="go">去完成</span>
            <span class="complete" v-show="watch == 1" >已完成</span>
          </div>
        </div>
        <div class="daily">
          <div class="title">日常任务</div>
          <div class="item">
            <i class="iconfont icon-xiaoxizhongxin one"></i>
            <div class="operation">
              <span class="txt">发言互动</span
              ><span class="num">({{ say }}/10)</span>
              <p>直播间发言，奖励10鲨豆/次</p>
            </div>
            <span class="go" v-show="say != 10" @click="go">去完成</span>
            <span class="complete" v-show="say == 10" >已完成</span>
          </div>
          <div class="item">
            <i class="iconfont icon-share_light two"></i>
            <div class="operation">
              <span class="txt">主播分享</span
              ><span class="num">({{ hostshare }}/10)</span>
              <p>分享主播，奖励20鲨豆/次</p>
            </div>
            <span class="go" v-show="hostshare != 10" @click="go">去完成</span>
            <span class="complete" v-show="hostshare == 10" >已完成</span>
          </div>
          <div class="item">
            <i class="iconfont icon-zhibo1 three"></i>
            <div class="operation">
              <span class="txt">观看直播</span><span class="num">(0/10)</span>
              <p>观看直播每满30分钟奖励30鲨豆</p>
            </div>
            <span class="go"   @click="go">去完成</span>
            <!-- <span class="complete" v-show="watch" >已完成</span> -->
          </div>
        </div>
        <div class="invite">
          <div class="title">邀请任务</div>
          <div class="item">
            <i class="iconfont icon-yaoqinghaoyou"></i>
            <div class="operation">
              <span class="txt">邀请好友</span
              ><span class="num">(已邀请0人)</span>
              <p>每成功邀请1人注册，奖励200鲨豆</p>
            </div>
            <span class="go" @click="goinvite">去完成</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.missioncenter {
  .top {
    background-color: #d51c78;
    padding: 31px 10px;
    .iconfont {
      color: #fff;
    }
    .info {
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img {
        width: 60px;
        height: 60px;
        margin-top: 20px;
        margin-bottom: 10px;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      p {
        margin-top: 5px;
      }
    }
  }
  .content {
    position: relative;
    .move {
      position: absolute;
      width: 100%;
      top: -12px;
      .new {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        padding: 13px 12px;
        background-color: #fff;
        margin-bottom: 10px;
        font-size: 15px;
        .item {
          margin-top: 10px;
          height: 50px;
          display: flex;
          align-items: center;
          // justify-content: space-between;
          .iconfont {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #faf0fe;
            color: #b14afc;
            font-size: 22px;
            border-radius: 4px;
            margin-right: 10px;
          }
          .operation {
            flex: 1;
            font-size: 13px;
            .txt {
              color: #000;
              margin-right: 2px;
            }
            .num {
              color: #df9660;
            }
            p {
              color: #9a9a9a;
            }
          }
          .go {
            background-color: #d51c78;
            color: #fff;
            font-size: 12px;
            padding: 3px 12px;
            border-radius: 12px;
          }
        }
      }
      .daily {
        padding: 13px 12px;
        background-color: #fff;
        margin-bottom: 10px;
        font-size: 15px;
        .item {
          margin-top: 10px;
          height: 50px;
          display: flex;
          align-items: center;
          // justify-content: space-between;
          .iconfont {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #faf0fe;
            color: #b14afc;
            font-size: 22px;
            border-radius: 4px;
            margin-right: 10px;
          }
          .one {
            color: #fd9204;
            background-color: #fffcf1;
          }
          .two {
            color: #fe1f73;
            background-color: #fef8fa;
          }
          .three {
            color: #78c901;
            background-color: #f7ffea;
          }
          .operation {
            flex: 1;
            font-size: 13px;
            .txt {
              color: #000;
              margin-right: 2px;
            }
            .num {
              color: #df9660;
            }
            p {
              color: #9a9a9a;
            }
          }
          .go {
            background-color: #d51c78;
            color: #fff;
            font-size: 12px;
            padding: 3px 12px;
            border-radius: 12px;
          }
        }
      }
      .invite {
        padding: 13px 12px;
        font-size: 15px;
        background-color: #fff;
        .item {
          margin-top: 10px;
          height: 50px;
          display: flex;
          align-items: center;
          // justify-content: space-between;
          .iconfont {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #f5faff;
            color: #2c6fc6;
            font-size: 22px;
            border-radius: 4px;
            margin-right: 10px;
          }
          .operation {
            flex: 1;
            font-size: 13px;
            .txt {
              color: #000;
              margin-right: 2px;
            }
            .num {
              color: #df9660;
            }
            p {
              color: #9a9a9a;
            }
          }
          .go {
            background-color: #d51c78;
            color: #fff;
            font-size: 12px;
            padding: 3px 12px;
            border-radius: 12px;
          }
        }
      }
    }
  }
}

.complete {
  background-color: #ffc0cb;
  color: #fff;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 12px;
}
</style>